<h3 class="my-3">正则的练习</h3>

<hr />
<div class="alert alert-primary">
    <p>匹配整数或者小数（包括正数和负数）</p>
    <input [(ngModel)]="str1" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test1() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>匹配年月日日期 格式2018-12-6</p>
    <input [(ngModel)]="str2" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test2() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>匹配qq号</p>
    <input [(ngModel)]="str3" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test3() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>匹配11位的手机号</p>
    <input [(ngModel)]="str4" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test4() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>匹配邮箱地址</p>
    <input [(ngModel)]="str5" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test5() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>简单的身份证匹配</p>
    <input [(ngModel)]="str6" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test6() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>给手机号打马赛克</p>
    <input [(ngModel)]="str8" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test8() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>提取出网址和网名为JSON数据</p>
    <div class="code-dark">
        <pre><code [highlight]="str9"></code></pre>
    </div>
    <div class="code-dark">
        <pre><code [highlight]="test9() | json"></code></pre>
    </div>
</div>

<div class="alert alert-primary">
    <p>从类似9-2*5/3+7/3*99/4*2998+10*568/14的表达式中匹配出从左到右第一个乘法或除法</p>
    <input [(ngModel)]="str10" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test10() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>从下面面算式中匹配出最内层小括号以及小括号内的表达式</p>
    <p>1-2*((60-30+(-40/5)*(9-2*5/3+7/3*99/4*2998+10*568/14))-(-4*3)/(16-3*2))</p>
    <input [(ngModel)]="str11" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test11() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>数字千分符，将数字123456789分割成123,456,789</p>
    <input [(ngModel)]="str12" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test12() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>获取 url 中的参数，并提取hash</p>
    <input [(ngModel)]="str14" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test14() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>密码长度至少为8位，由字母和数字组成，其中必须包含一个特殊字符，其中字母至少有一个大写。</p>
    <input [(ngModel)]="str15" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test15() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>将时间2020-03-20 20:20:20 替换成 2020年03月20日 20时20分20秒</p>
    <input [(ngModel)]="str16" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test16() | json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>手机号服务商，匹配出手机号服务商</p>
    <input [(ngModel)]="str17" class="form-control" />
    <div class="code-dark">
        <pre><code [highlight]="test17() |json"></code></pre>
    </div>
</div>


<div class="alert alert-primary">
    <p>简单的模板引擎 动手编写一个简单模板引擎</p>
    <div class="code-dark">
        <pre><code [highlight]="str18"></code></pre>
    </div>
    <div class="code-dark">
        <pre><code [highlight]="data18 | json"></code></pre>
    </div>
    <p><button class="btn btn-info" type="button" (click)="test18()">运行</button></p>
    <p>运行结果</p>
    <div [innerHtml]="str18Res"></div>
    
</div>


<div class="alert alert-primary">
    <p>断言练习 去除html空格和换行</p>
    <div class="code-dark">
        <pre><code [highlight]="str19"></code></pre>
    </div>
    <div class="code-dark">
        <pre><code [highlight]="test19()"></code></pre>
    </div>
</div>


